
tab('.part2 aside ul li','.details section')
tab('.part2 nav ul li','.details section')

changeClass('.part2 nav ul li','active',function(num){
    autoClasss('.part2 aside ul li', 'active', num)
})
changeClass('.part2 aside ul li','active',function(num){
    autoClasss('.part2 nav ul li', 'active', num)
    // const part2 = document.querySelector('.part2 nav ul');
    // let x = part2.children[num].offsetLeft/16
    // part2.children[0].style.marginLeft = '-'+x+'rem'
})

admin('.part3 .header span','.admin')





    
function admin(control,change){
    const con = document.querySelector(control)
    const cha = document.querySelectorAll(change)
    let f = true

    con.addEventListener('click',()=>{
        if (f) {
            f = false;
            cha[1].style.display = 'flex'
            cha[0].style.display = 'none'
        }else{
            f = true;
            cha[1].style.display = 'none'
            cha[0].style.display = 'flex'
        }
    })
}

function tab(click, changeitem) {
    const control = document.querySelectorAll(click);
    const change = document.querySelectorAll(changeitem);
	for (let i = 0; i < change.length; i++) {
		control[i].addEventListener("click", () => {
			for (let j = 0; j < change.length; j++) {
				change[j].style.display = "none";
			}
			change[i].style.display = "flex";
		});
	}
}

function autoClasss(object, change, num) {
    const obj = document.querySelectorAll(object);
	for (let i = 0; i < obj.length; i++) {
		obj[i].classList.remove(change);
	}
	if (num>obj.length-1) {
	    num = 0
	}
	obj[num].classList.add(change);
}

function changeClass(click, changeitem ,success) {
    const obj = document.querySelectorAll(click);
	for (let i = 0; i < obj.length; i++) {
		obj[i].addEventListener("click", () => {
			for (let j = 0; j < obj.length; j++) {
				obj[j].classList.remove(changeitem);
			}
            obj[i].classList.add(changeitem);
            if (success) {
                success(i)
            }
		});
    }
}